<template>
	<!-- 可以预览/播放 -->
	<div class="cover_content column xy_center" v-if="isPreview">
		<!-- 图片 -->
		<el-image v-if="fileType == 'image'" :previewSrcList="[fileUrl]" loading="lazy" style="width: 100%; height: 100%;" :src="fileUrl" fit="contain" />
		<!-- 视频 -->
		<video  controls v-if="fileType == 'video'" :src="fileUrl" style="width: 100%; height: 100%;background-color: #000;"></video>
		<!-- 音频 -->
		<audio style="" controls v-if="fileType == 'audio'" :src="fileUrl"></audio>
	</div>
	<div  class="cover_content" v-else>
		<el-image loading="lazy" style="width: 100%; height: 100%;" :src="_fileCover" fit="contain" />
	</div>
</template>

<script>
	export default {
		props: {
			fileType: {
				type: String,
				default: "image"
			},
			fileUrl: {
				type: String,
				default: ""
			},
			fileCover: {
				type: String,
				default: ""
			},
			isPreview:{
				type:Boolean,
				default:false
			}
		},
		computed: {
			_fileCover() {
				if (this.fileCover) {
					return this.fileCover
				}
				let cover = ''
				switch (this.fileType) {
					case 'image':
						cover = this.fileUrl
						break;
					case 'audio':
						cover = this.audioCover
						break;
					case 'video':
						cover = this.videoCover
						break;
				}
				return cover
			}
		},
		data() {
			return {
				audioCover:"",
				videoCover:"",
			}
		}
	}
</script>

<style scoped lang="less">
	.cover_content{
		width:100%;
		height:100%;
	}
</style>